<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.wangji{
	height: 3rem;
	line-height: 3rem;
	text-align: right;
	display: block;
	color: #999;
}
.wangji{
	width: 50%;
	float: left;
	padding-right:0.5rem;
	padding-left:0.5rem;
}
.wangji.tleft{
	text-align: left;
}
.jlogin{
	width: auto;
	height: auto;
	margin: 1rem 0 0 0;
	background: #fff;
}
.login-line{
	display: flex;
	display: -webkit-flex;
	position: relative;
	line-height:4rem;
}
.login-lable{
	width:60px;
	height:4rem;
	text-align:center;
	color:dodgerblue;
}
.iconfont-label{
	font-size: 18px;
	border-right: 1px solid #eee;
	padding-right: 15px;
}
.login-txt{
	flex: 1;
	-webkit-flex: 1;
}
.login-input{
	display: block;
	height:4rem;
	width: 100%;
	border: 0;
	font-size: 14px;
	padding-left:0px;
}
.sendcodebtn{
	width: auto;
	height: 4rem;
	background:dodgerblue;
	position: absolute;
	right: 1rem;
	top: 1rem;
	color: #fff;
	border-radius: 0.5rem;
	line-height: 4rem;
	padding: 0 1rem 0 1rem;
	font-size:1.2rem;
}
.sendcodebtn.disabel{
	background: #999;
	color: #ccc;
}
.loginSubmit:active{
	color: #fff;
	opacity: 0.6;
}
</style>
</head>
<body>
<div id="immersed" class="immersed hide"></div>
<div id="jheader" class="line-b jflex">
	<a class="header-item iconfont icon-i7 mui-action-back"></a>
	<div id="jheader-center" class="header-item">用户注册</div>
	<a class="header-item"></a>
</div>

<div class="jcontent content-pheader">
	<div id="loginbox">
		<div class="jlogin">
			<div class="login-line line-b vcenter">
				<div class="login-lable">
					<i class="iconfont iconfont-label icon-yhm"></i>
				</div>
				<div class="login-txt">
					<input id="mobile" type="text" class="login-input" placeholder="请输入用户名" value=""/>
				</div>
			</div>
			<div class="login-line vcenter">
				<div class="login-lable">
					<i class="iconfont  iconfont-label icon-mima"></i>
				</div>
				<div class="login-txt">
					<input id="pass" type="password" class="login-input" placeholder="请输入密码"/>
				</div>
			</div>
		</div>
		<a id="loginbtn" class="blockbtn">确认登录</a>
		<div class="bbox">
			<a id="zhuce" class="wangji tleft">免费注册</a>
			<a class="wangji">忘记密码？</a>
		</div>
		
	</div>
	
	<div id="regbox" class="hide">
		<div class="jlogin">
			<div class="login-line line-b">
				<div class="login-lable">
					<i class="iconfont  iconfont-label icon-sj"></i>
				</div>
				<div class="login-txt">
					<input id="regmobile" type="number" class="login-input" placeholder="请输入您的手机号码"/>
				</div>
			</div>
			<div class="login-line line-b">
				<div class="login-lable">
					<i class="iconfont  iconfont-label icon-mima"></i>
				</div>
				<div class="login-txt">
					<input id="regpass" type="password" class="login-input" placeholder="请输入您的密码"/>
				</div>
			</div>
			<div class="login-line">
				<div class="login-lable">
					<i class="iconfont  iconfont-label icon-cfmm"></i>
				</div>
				<div class="login-txt">
					<input id="regRepass" type="password" class="login-input" placeholder="请再次输入您的密码"/>
				</div>
			</div>
		</div>
		<a id="regbtn" class="blockbtn">注册</a>
		<div class="bbox">
			<a class="wangji tleft"></a>
			<a id="denglu" class="wangji">我有账号,直接登录</a>
		</div>
	</div>
	
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	mui('.bbox').on('tap', '#zhuce', function(e) {
		showReg();
	});
	mui('.bbox').on('tap', '#denglu', function(e) {
		showLogin();
	});
	
	mui('#loginbox').on('tap', '#loginbtn', function(e) {
		//隐藏输入法
		webapp.hideTypewriting(["mobile","pass"]);
		login();
	});
	mui('#regbox').on('tap', '#regbtn', function(e) {
		//隐藏输入法
		webapp.hideTypewriting(["regmobile","regpass","regRepass"]);
		reg();
	});
});

/**
 * 显示注册窗口
 */
function showReg(){
	document.getElementById("loginbox").classList.add("hide");
	document.getElementById("regbox").classList.remove("hide");
}

/**
 * 显示登陆窗口
 */
function showLogin(){
	document.getElementById("loginbox").classList.remove("hide");
	document.getElementById("regbox").classList.add("hide");
}

/**
 * 注册提交
 */
function reg(){
	var _userName=document.getElementById("regmobile").value;
	var data={
		name:_userName,
		confirmPwd:document.getElementById("regRepass").value,
		pwd:document.getElementById("regpass").value,
		type:2
	};
	if(!checkregData(data)){
		return false;
	}
	webapp.showWaiting();
	//执行注册
	webapp.ajax({
		url:"/carLife/admin/interface/register/save",
		data:data,
		success:function(json){
			regSuccess(json,_userName);
		}
	});
}

function regSuccess(json,userName){
	webapp.closeWaiting();
	if(json.code!="200"){
		mui.toast(json.msg);
		return false;
	}
	//把对象序列化，存入缓存
	data={
		accountName:userName,
		nickName:userName,
        reallyName:userName,
        birthdayForamt:"",
        gender:"",
        tel:userName,
        regTime:webapp.util.dateFormat(json.data.createTiem,"yyyy年MM月dd日")
	};
	var serilizeUser=JSON.stringify(data);
	//把用户对象放入缓存
	window.localStorage.setItem(webapp.config.CACHE_USER,serilizeUser);
	//把token放入缓存
	window.localStorage.setItem(webapp.config.TOKEN,json.data.token);
	//关闭注册窗口
	plus.webview.getTopWebview().hide("auto");
	window.setTimeout(function(){
		showLogin();
		//触发个人中心的用户信息显示
		mui.fire(plus.webview.getWebviewById("geren.html"),"setUserInfo");
	},360);
}


/**
 * 检查注册的数据是否正确
 * @param {Object} data
 */
function checkregData(data){
	if(webapp.util.isNull(data.name)){
		mui.toast("手机号码不能为空！");
		return false;
	}else if(webapp.util.isNull(data.pwd)){
		mui.toast("密码不能为空！");
		return false;
	}else if(webapp.util.isNull(data.confirmPwd)){
		mui.toast("请再次输入密码！");
		return false;
	}else if(data.pwd != data.confirmPwd){
		mui.toast("两次输入密码不一致！");
		return false;
	}
	return true;
}

function login(){
	webapp.showWaiting();
	webapp.ajax({
		url:"/carLife/admin/interface/login/submit",
		data:{
			name:document.getElementById("mobile").value,
			type:2,
			"password":document.getElementById("pass").value
		},
		success:function(json){
			webapp.debug(json);
			if(json.code!="200"){
				//移除缓存中的token
				window.localStorage.removeItem(webapp.config.TOKEN);
				window.localStorage.removeItem(webapp.config.CACHE_USER);
				webapp.closeWaiting();
				plus.nativeUI.toast(json.msg);
			}else{
				loginSuccess(json);
				var _webview=plus.webview.getWebviewById("list.html");
				mui.fire(_webview,"userLogin",{code:200});
			}
		}
	});
}

/**
 * 登陆成功
 * @param {Object} json
 */
function loginSuccess(json){
 	//把对象序列化，存入缓存
	var data={
		userName:json.data.userName,
		accountName:json.data.accountName,
		mobile:json.data.tel,
		nickName:json.data.nickName,
		regTime:webapp.util.dateFormat(json.data.registerTime,"yyyy年MM月dd日"),
		headPortrait:json.data.headPortrait,
		type:json.data.type
	};
	//把用户对象序列化后放入缓存
	window.localStorage.setItem(webapp.config.CACHE_USER,JSON.stringify(data));
	//把token放入缓存
	window.localStorage.setItem(webapp.config.TOKEN,json.data.token);
	plus.webview.currentWebview().hide("auto");
	webapp.closeWaiting();
	//更新个人界面的信息
	var gerenwebView=plus.webview.getWebviewById("geren.html");
	mui.fire(gerenwebView,"loadList");
}

window.addEventListener('opened',function(event){
	document.getElementById("mobile").focus();
	plus.nativeUI.toast("请登录后再进行该操作");
});

</script>
</body>
</html>
